<script setup lang="ts">
import request from "@/utils/request";
import API from "@/api";

import AddMember from "./components/AddMember.vue";

defineOptions({
  name: "Member",
});

let queryParams = reactive({
  page: 1,
  pageSize: 10,
  name: "",
  total: 0,
});

let tableData = ref([]);
let tableLoading = ref(false);

const queryList = async () => {
  try {
    tableLoading.value = true;
    const res = await request.get(API.pageEmployeeQuery, {
      params: queryParams,
    });
    if (res.code === 1) {
      tableData.value = res.data.records;
      queryParams.total = res.data.total || 0;
    }
  } catch (error) {
    ElMessage.error("获取数据失败!");
  } finally {
    tableLoading.value = false;
  }
};

const handleQuery = () => {
  queryParams.page = 1;
  queryList();
};

const addMemberRef = ref();

const addMemberHandle = (row: Record<string, any> | string) => {
  addMemberRef.value.openAddMember(row);
};

interface MemberStatus {
  id: number;
  status: number;
}

const statusHandle = async (row: MemberStatus) => {
  const res = await request.put(API.editEmployee, {
    id: row.id,
    status: !row.status ? 1 : 0,
  });
  if (res.code === 1) {
    ElMessage.success("账号状态更改成功!");
    handleQuery();
  }
};

onMounted(() => {
  queryList();
});

// 分页
const handleSizeChange = (val: number) => {
  queryParams.page = 1;
  queryParams.pageSize = val;
  queryList();
};
const handleCurrentChange = (val: number) => {
  queryParams.page = val;
  queryList();
};

const statusFormatter = (row: { status: number }): string => {
  return row.status === 1 ? "正常" : "已禁用";
};
</script>

<template>
  <page-view>
    <template #tableBar>
      <section class="w-full flex gap-col-10">
        <section class="w-240 inline-block">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入员工姓名"
            clearable
            @clear="handleQuery"
            @keyup.enter.native="handleQuery"
          >
            <template #prefix>
              <el-icon class="el-input__icon">
                <i-ep-search />
              </el-icon>
            </template>
          </el-input>
        </section>

        <el-button type="primary" @click="addMemberHandle('add')">
          + 添加员工
        </el-button>
      </section>
    </template>
    <el-table :data="tableData" stripe v-loading="tableLoading" height="600">
      <el-table-column prop="name" label="员工姓名" />
      <el-table-column prop="username" label="账号" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column
        prop="status"
        label="账号状态"
        :formatter="statusFormatter"
      />
      <el-table-column label="操作" width="160" align="center" fixed="right">
        <template #default="scope">
          <el-button
            link
            size="small"
            type="primary"
            @click="addMemberHandle(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            link
            size="small"
            type="danger"
            @click="statusHandle(scope.row)"
          >
            {{ scope.row.status === 1 ? "禁用" : "启用" }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="justify-center mt-10"
      v-model:current-page="queryParams.page"
      v-model:page-size="queryParams.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryParams.total"
      :hide-on-single-page="queryParams.total === 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加员工 -->
    <add-member ref="addMemberRef" @refresh="queryList" />
  </page-view>
</template>
